<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add()">
        </div>

        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>
                        <input type="checkbox" @change="allCheckChange" v-model="allCheck">
                        全选：
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in products" :key="item.code">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img width="100" :src="item.imgSrc" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.productName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.number===0">-</button>
                        &nbsp;
                        {{item.number}}
                        &nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" style="text-align: center;">没有更多数据了</div>
        </div>
        <h1 class="add" style="text-align:right">总价格：{{total}}</h1>
        <!-- <h1>{{checks}}</h1> -->
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    let local = {
        get(key) {
            return JSON.parse(localStorage.getItem(key))
        },
        set(key, value) {
            localStorage.setItem(key, JSON.stringify(value))
        }
    }
    let initialData = ([
        {
            id: 1,
            imgSrc: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.Hg27XiRi6YtS_SWyQAuuNgHaEo?w=285&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7',
            productName: '亚索',
            code: 001,
            number: 1,
            price: 999,
        },
        {
            id: 2,
            imgSrc: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.nY4sC8ts2ndJ8LxqEjzPQAHaEb?w=290&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7',
            productName: '永恩',
            code: 002,
            number: 1, 
            price: 888,
        },
        {
            id: 3,
            imgSrc: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.j9gJNViYuBXOhrNCDNFsaQHaEo?w=289&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7',
            productName: '瑞文',
            code: 003,
            number: 1,
            price: 777,
        },
        {
            id: 4,
            imgSrc: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.emr18e2Gx9RWruR-bEtiGwHaEY?w=283&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7',
            productName: '亚托克斯',
            code: 004,
            number: 1,
            price: 666,
        },
    ])
    let vm = new Vue({
        el: '#app',
        data: {
            allCheck: false,
            checks: [],
            code: '',
            imgSrc: '',
            productName: '',
            price: '',
            products: local.get('qf-data') ?? initialData
        },
        methods: {
            decrease(current) {
                current.number--
            },
            increase(current) {
                current.number++
            },
            del(index) {
                let target = this.products.splice(index, 1)
                local.set('qf-data', this.products)
                this.checks = checks.filter(item => item.id !== target[0].id)
            },
            add() {
                if (!this.code || !this.productName || !this.imgSrc || !this.price) {
                    return
                }
                let obj = {
                    id: "",
                    productName: this.productName,
                    price: this.price,
                    code: this.code,
                    imgSrc: this.imgSrc,
                    number: 1,
                }
                this.products.push(obj)
                local.set('qf-data', this.products)
            },
            allCheckChange() {
                // console.log('allCheck'); 
                // console.log(this.allCheck);
                if (this.allCheck) {
                    this.checks = this.products
                } else {
                    this.checks = []
                }
            }
        },
        computed: {
            total() {
                let res = this.checks.reduce((total, item) => {
                    return total += item.price * item.number
                }, 0)
                return res.toFixed(2)
            }
        }
    }
    )
</script>